<template>
  <div class="container">
    <div class="goods">
      <!-- BEGIN 商品轮播图 -->
      <van-swipe class="goods-swipe" :autoplay="100000">
        <van-swipe-item v-for="thumb in sku.goodsinfo.album" :key="thumb.id">
          <van-image :src="thumb.src" />
        </van-swipe-item>
      </van-swipe>
      <!-- END 商品轮播图 -->

      <!-- BEGIN 商品基本信息 -->
      <van-cell-group class="goods-cell-group">
        <van-cell>
          <div class="goods-title">{{ sku.goodsinfo.name }}</div>
          <div class="goods-desc">
            <span v-show="sku.goodsinfo.slogan" class="quote">{{sku.goodsinfo.slogan}}</span>
            {{sku.goodsinfo.description}}
          </div>
          <div class="goods-price">
            <span class="price-cny">{{ sku.goodsinfo.price }}</span>
          </div>
        </van-cell>
        <van-cell class="goods-cell-custorm">
          <span>
            <van-icon name="passed" />免运费
          </span>
          <span>
            <van-icon name="passed" />
            销量：{{ sku.goodsinfo.sales }}
          </span>
          <span>
            <van-icon name="passed" />济宁
          </span>
        </van-cell>
      </van-cell-group>
      <!-- END 商品基本信息 -->

      <!-- BEGIN 商品SKU、参数信息 -->
      <van-cell-group class="mt10 goods-cell-group">
        <van-cell title="规格" is-link @click="showBase = true">
          <span v-html="sku.initialSku.text"></span>
        </van-cell>
        <van-cell title="参数" is-link>
          <span>无</span>
        </van-cell>
      </van-cell-group>
      <!-- END 商品SKU、参数信息 -->

      <!-- BEGIN 推荐评价 -->
      <van-cell-group class="mt10 user-panel">
        <van-cell title="商品评价（109928）" is-link>
          <template>查看全部</template>
        </van-cell>
      </van-cell-group>
      <!-- END 推荐评价 -->

      <!-- BEGIN 商品详情 -->
      <div class="framerich goods-detail" v-html="sku.goodsinfo.content"></div>
      <!-- END 商品详情 -->

      <!-- BEGIN 商品SKU信息面板 -->
      <van-sku
        v-model="showBase"
        :sku="sku.sku"
        :goods="sku.goodsinfo"
        :goods-id="sku.goods_id"
        :hide-stock="sku.sku.hide_stock"
        :quota="sku.quota"
        :quota-used="sku.quota_used"
        :initial-sku="sku.initialSku"
        :close-on-click-overlay="closeOnClickOverlay"
        ref="skuData"
      >
        <template slot="sku-actions">
          <div class="van-sku-actions">
            <van-button
              type="primary"
              bottom-action
              @click="onAddCartClicked"
              class="van-button van-button--default van-button--normal van-button--bottom-action"
            >加入购物车</van-button>
          </div>
        </template>
      </van-sku>
      <!-- END 商品SKU信息面板 -->
    </div>
    <van-goods-action>
      <van-goods-action-mini-btn icon="chat" text="客服" @click="onClickService" />
      <van-goods-action-mini-btn
        icon="cart"
        :info="sku.cartSkuCount"
        text="购物车"
        @click="pushWeblink({type:'cart'})"
      />
      <van-goods-action-big-btn text="加入购物车" @click="onAddCartClicked" />
    </van-goods-action>
  </div>
</template>

<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  Toast,
  Popup,
  Image,
  Sku,
  Tab,
  Tabs,
  Button,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn
} from 'vant'

import { LIMIT_TYPE } from './constants'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Sku.name]: Sku,
    [Tab.name]: Tab,
    [Image.name]: Image,
    [Tabs.name]: Tabs,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn
  },

  data () {
    return {
      active: 2,
      chosenCoupon: -1,
      coupons: [
        {
          id: 1, // 优惠券
          name: '优惠券名称', // 优惠券名称
          discount: 88, // 折扣（0为满减券）88=>8.8折
          denominations: 0, // 面值（0为折扣券）单位分
          origin_condition: 10, // 满减条件（0为无门槛，满XX元可用）单位分
          start_at: 1489104000, // 卡有效开始时间 (时间戳, 单位秒)
          end_at: 1514592000, // 卡失效日期 (时间戳, 单位秒)
          reason: '', // 不可用原因
          value: 0, // 订单优惠金额，单位分
          available: 1
        }
      ],
      disabledCoupons: [
        {
          available: 1,
          discount: 0,
          denominations: 150,
          origin_condition: 0,
          reason: '',
          value: 150,
          name: '优惠券名称',
          start_at: 1489104000,
          end_at: 1514592000
        }
      ],
      closeOnClickOverlay: true,
      showBase: false,
      sku: {
        sku: {},
        goods_id: 946755,
        alias: '2oml0r0n5vytj',
        quota: 0,
        is_virtual: 0,
        quota_used: 0,
        goodsinfo: {},
        initialSku: {},
        cartSkuCount: ''
      },
      customStepperConfig: {
        quotaText: '单次限购100件',
        handleOverLimit: data => {
          const { action, limitType, quota } = data
          if (action === 'minus') {
            this.$toast('至少选择一件商品')
          } else if (action === 'plus') {
            if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
              this.$toast('限购' + quota + '件')
            } else {
              this.$toast('库存不够了~~')
            }
          }
        }
      }
    }
  },
  created: function () {
    console.log('----------created')
    this.onLoad()
    this.message = 2
  },
  mounted: function () {
    console.log('--------mounted-------')
  },
  activated: function () {
    console.log('--------activated-------')
  },
  methods: {
    onLoad () {
      let spuid = this.$route.params.id
      this.axios
        .get('/shop/spu/' + spuid)
        .then(response => {
          this.sku = response.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },

    onChange (index) {
      this.chosenCoupon = index
    },

    onCommission (index) {
      this.$router.push({ name: 'commission/brokerage' })
    },

    onBuyClicked (data) {
      this.$toast(JSON.stringify(data))
    },

    onAddCartClicked () {
      let data = this.$refs.skuData.getSkuData()
      if (data.selectedSkuComb) {
        this.showBase = false
        let sku = data.selectedSkuComb
        let nums = data.selectedNum
        let goodsId = data.goodsId
        this.sku.initialSku = sku
        this.axios
          .post(
            '/shop/cart/add',
            {
              product_id: goodsId,
              goods_id: sku.id,
              nums: nums
            },
            { headers: { FastMode: true } }
          )
          .then(response => {
            this.sku.cartSkuCount = Number(response.data)
          })
          .catch(function (error) {
            console.log(error)
            this.$toast(error)
          })
      } else {
        this.$toast('请选择商品规格')
      }
    },

    getSkuData (data) {
      console.log(data)
      this.$toast(JSON.stringify(data))
    },

    onExchange (code) {
      this.coupons.push({
        available: 1,
        discount: 0,
        denominations: 150,
        origin_condition: 0,
        reason: '',
        value: 150,
        name: '优惠券名称',
        start_at: 1489104000,
        end_at: 1514592000
      })
    },

    onClickCart () {
      this.$router.push({ name: 'cart' })
    },

    onClickService () {
      Toast('客服消息')
    },

    sorry () {
      Toast('暂无后续逻辑~')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.van-goods-action-big-btn:disabled /deep/ {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 0.65;
}
.goods {
  padding-bottom: 50px;

  &-swipe {
    img {
      width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  &-title {
    font-size: 18px;
    color: #121212;
    font-weight: 500;
    min-height: 20px;
  }

  &-price {
    color: #f44;
    font-size: 24px;
  }

  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }

  &-detail {
    word-wrap: break-word;
    font-size: 80%;
    h1 {
      color: #f44;
      font-weight: normal;
    }
    img {
      width: 100%;
    }
  }

  &-mark {
    word-wrap: break-word;
    font-size: 0.2rem;
    border: 1px dashed #aaa;
    border-radius: 0.15rem;
    padding: 0.3rem;
    position: relative;
    margin-top: 0.5rem;
    line-height: 0.36rem;
    color: #666;
  }

  &-mark:before {
    position: absolute;
    left: 50%;
    top: 0;
    width: 20%;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-left: -10%;
    margin-top: -0.2rem;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    background: white;
    content: "兑换说明";
  }
}
/deep/ .van-swipe {
  &__track {
    padding-bottom: 100%;
  }
  &-item {
    position: relative;
    height: 3.5rem !important;
  }
}
.goods-cell-custorm {
  .van-cell__value {
    font-size: 80%;
    line-height: 1.1;
    color: #868686;
    span {
      margin-right: 5px;
    }
    i.van-icon {
      font-size: 80%;
      color: #f56660;
    }
  }
}

.avatar {
  width: 20px;
  height: 20px;
}

.user-panel /deep/ .van-cell__title {
  flex: 2;
  -webkit-box-flex: 2;
}
.user-avatar {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  height: 0.75rem;
  margin-right: 0.2rem;
}
.user-avatar > img {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.user-avatar > span {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background-color: #ff6600;
  color: #fff;
  line-height: 0.2rem;
  font-size: 0.1rem;
  text-align: center;
}
.van-cell-text {
  font-size: 0.3rem;
  font-weight: 500;
}
.user-panel /deep/ .van-cell__value span {
  font-size: 0.3rem;
  font-weight: 600;
  color: #ff6600;
  padding-right: 0.05rem;
}
</style>
